<template>
    <view class="p-l-r">
        <template v-for="row in dataRows" :key="row.id">
            <view class="log-item" @tap="nav(row.id, row.status)">
                <view class='m-t-10'>订单号：<Text user-select>{{ row.orderNo }}</Text>
                    <nut-tag class="m-l-10" :type="status(row.status)">{{ CHARGE_ORDER_STATUS[row.status] }}</nut-tag>
                </view>
                <view v-if="row.status == 3 && row.failReason" class='m-t-10'>失败原因：{{ row.failReason }}</view>
                <view class='m-t-10'>设备号：<text user-select>{{ row.deviceId }}</text> #{{ PORT_NAME[row.port] }}</view>
                <view class='m-t-10'>下单时间：{{ parseTime(row.createTime) }}</view>
                <template v-if="row.status == 2">
                    <view class='m-t-10'>结束时间：{{ parseTime(row.endTime) }}</view>
                </template>
            </view>
        </template>
    </view>
    <LoadMore key-name="id" :api="pageApi" @finish="page" />
</template>

<script lang="ts" setup>
    import { pageApi } from '@/api/ChargeOrder';
    import LoadMore from '@/components/LoadMore/index.vue'
    import { CHARGE_ORDER_STATUS, PORT_NAME } from '@/constant';
    import { parseTime } from '@/utils';
import { navigateTo } from '@/utils/framework';
    import { ref } from 'vue';
    
    function status(s) {
        if(s == 0) {
            return ''
        }

        if(s == 1) {
            return 'primary'
        }
        if(s == 2) {
            return 'success'
        }

        if(s == 3) {
            return 'danger'
        }


    }
    

    const dataRows = ref<any[]>([])

    function page(rows:any[]) {
        dataRows.value.push(...rows)
    }

    function nav(id:number, status:number) {
        navigateTo(status == 1 ? ('./charging/index?id=' + id) : ('./detail/index?id=' + id))
    }


</script>

<style lang="scss" src="./index.scss"></style>